<template>
    <div class="input_big">
        <div class="left">
            <div class="yaun"></div>
            <div class="gun"></div>
        </div>
        <input @input="input($event)" type="text" :placeholder="text" :value="value">
    </div>
</template>
<script setup>
import { defineEmits } from 'vue';
let emit = defineEmits(['update:value'])
const props = defineProps(
    {
        text: {
            type: String,
            default: () => ''
        },
        value: {
            type: String,
            default: () => '',
        },
    }
)
function input(e) {
    emit('update:value', e.target.value)
}
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 / 10rem)
}

.input_big {
    height: 100%;
    width: 100%;
    background-color: #242630;
    border-radius: r(5);
    display: flex;
    align-items: center;

    input {
        flex: 1;
        height: 100%;
        color: #e8e8e9;
        background: none;
        font-size: r(14);
    }

    .left {
        position: relative;
        width: r(40);
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .yaun {
        border-radius: 50%;
        border: r(2) solid #fff;
        width: r(12);
        height: r(12);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-70%, -75%);
    }

    .gun {
        width: r(7);
        height: r(2);
        background-color: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: rotate(45deg) translate(25%, 100%);
        border-radius: r(2);
    }
}
</style>